<template>

   <div class="articleList">

      <div class="header">
         <h1>文章列表</h1>
         <el-input v-model="articlename" style="width: 240px" size="large" placeholder="根据名字搜索" :prefix-icon="Search" />
         <el-select v-model="articleType" placeholder="选择类型" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <el-button type="primary" :icon="Search" @click="handleClick">Search</el-button>
      </div>
      <el-divider />
      <div class="content">
         <el-table :data="tableData" stripe  height="350"  style="width: 100%">
            <el-table-column prop="id" label="ID" width="100" />
            <el-table-column prop="type" label="类型" width="100" />
            <el-table-column prop="title" label="文章名" width="180" />
            <el-table-column label="操作" width="180">
               <!-- 选择上架下架 -->
               <template #default="scope">
                  <el-button type="success" v-if="scope.row.status == 1" @click="ShangJia(scope.row)"> 上架 </el-button>
                  <el-button type="warning" v-else-if="scope.row.status == 0" @click="XiaJia(scope.row)">下架</el-button>
               </template>

            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="180" />
            <el-table-column label="编辑" width="240">
               <template #default="scope">
                  <el-button type="info" @click="Gopinyin(scope.row.id,scope.row.title,scope.row.status)" >音频</el-button>
                  <addimage :articleId="scope.row.id" :articleName="scope.row.title"></addimage>
                  <setWord :articleId="scope.row.id" :articleName="scope.row.title"></setWord>
               </template>
            </el-table-column>
         </el-table>



         <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

   </div>

</template>
<script setup lang="ts" name="ArticleList">
import setWord from '@/components/setWord.vue';
import Addimage from '@/components/addimage.vue';
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import axios from 'axios';
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
//搜索的类型
const articleType = ref('');
//搜索的名字
const articlename = ref('');
const router = useRouter();

let options = ref([
   {
      value: '0',
      label: '所有',
   }
])

//文章列表
const tableData = ref([
   {
      id: 2,
      author: "wpx",
      title: "王的霸业",
      type: "1",
      status: 1,
      updateTime: "2025-04-25T16:33:23",

   },
])

//分页模块


// 当前页数
const currentPage = ref(1)
//页总数
const total = ref(0)
//每页条数
const pageSize = ref(10)
const size = ref('default')
const background = ref(false)
const disabled = ref(false)


const handleSizeChange = (val: number) => {
   getArticleList();
}
const handleCurrentChange = (val: number) => {
   getArticleList();
}

// 点击搜索
const handleClick = () => {
   getArticleList();
   getArticleTotal(); 
   ElMessage.success("搜索成功")
}




// 发送并获取分页列表
const getArticleList = async () => {
   let pageVO = {
      pageNo: currentPage.value,
      pageSize: pageSize.value,
      name: articlename.value,
      type: articleType.value
   }
   const { data } = await axios.post('http://localhost:8080/article/getArticleList', pageVO);
   if (data.success) {
      tableData.value = data.data
      for (let i = 0; i < tableData.value.length; i++) {
         for (let j = 0; j < options.value.length; j++) {
            if (tableData.value[i].type == options.value[j].value) {
               tableData.value[i].type = options.value[j].label
            }

         }
      }
   } else {
      console.log('获取分页失败', data.message)
   }
}

// 发送并获取分页列表
const getArticleTotal = async () => {
   let pageVO = {
      pageNo: currentPage.value,
      pageSize: pageSize.value,
      name: articlename.value,
      type: articleType.value
   }
   const { data } = await axios.post('http://localhost:8080/article/getArticleTotal', pageVO);
   if (data.success) {
      total.value = data.total
   } else {
      console.log('获取分页失败', data.message)
   }
}




//获取分类

const getArticleType = async () => {
   const { data } = await axios.get('http://localhost:8080/type/getTypeList');
   if (data.success) {
      options.value = data.data
      options.value.unshift({ value: '0', label: '所有', })
   } else {
      console.log('获取分类失败', data.message)
   }

}



onMounted(() => {
   getArticleTotal(); 
   getArticleType();
   getArticleList();
})
//点击下架
const ShangJia = async (row: any) => {
   const { data } = await axios.get('http://localhost:8080/article/status', {
      params: {
         id: row.id,
         status: row.status
      }
   });
   if (data.success) {
      ElMessage.success("下架成功")
      row.status = 0
   } else {
      console.log('失败', data.message)
   }
}

//点击上架
const XiaJia = async (row: any) => {
   const { data } = await axios.get('http://localhost:8080/article/status', {
      params: {
         id: row.id,
         status: row.status
      }
   });
   if (data.success) {
      ElMessage.success("上架成功")
      row.status = 1
   } else {
      console.log('失败', data.message)
   }
}

//跳转到音量页面
let Gopinyin=(id:any,title:any,status:any)=>{
   if(status==1){
      ElMessage.error('请先下架')
      return
   } 
  router.push({path:'/pinyin',query:{id:id,title:title}})
}









</script>



<style scoped>
.articleList {
   margin: 0 auto;
   width: 90%;
   height: 90%;
   background-color: #ffffff;
   padding: 20px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.demo-pagination-block+.demo-pagination-block {
   margin-top: 10px;
}

.demo-pagination-block .demonstration {
   margin-bottom: 16px;
}
</style>